/**
 * Copyright (c) 2017-present, Liu Jinyong
 * All rights reserved.
 *
 * https://github.com/huanxsd/MeiTuan  
 * @flow
 */


import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'
import { color } from '../../widget'
import { screen } from '../../common'
import { Heading3 } from '../../widget/Text'
import DateUtil from '../../common/DateUtil'

let count = 0

type Props = {
    info: Object,
    onPress: Function,
}


class FindCell extends PureComponent<Props> {



    render() {
        let info = this.props.info
        let onPress = this.props.onPress
        let bName = info.item.bName
        let text = info.item.text
        let createDate = DateUtil.formatDate(info.item.createDate, "yyyy-MM-dd hh:mm")
        let headUrl = info.item.headUrl
        let listImage = info.item.list_image
        let sum = info.item.sum
        let fullname = info.item.product.full_name
        let url =info.item.url
        let compression=info.item.compression
        let list_image=info.item.product.list_image
        
        return (
            <View style={styles.container}>
                {/*用户头像显示*/}
                <Image style={styles.icon} source={{ uri: headUrl }}></Image>
                {/*发现右半部分*/}
                <View style={styles.rightContainer}>
                    {/*用户姓名显示*/}
                    <Text style={styles.bname}>{bName}</Text>
                    {/*用户发表评价日期*/}
                    <Text style={styles.createDate}>{createDate}</Text>
                    {/*用户评价*/}
                    <Text style={styles.text}>{text}</Text>
                    {/*用户评价图片展示*/}
                    <View style={styles.gridContainer}>
                    {compression.map((img, i) => (
                        <Image source={{uri:img}} style={styles.bicon}   />  
                    ))}
                    </View>
                    <View style={styles.borderContainer}>
                        {/*商品展示*/}
                        <TouchableOpacity style={styles.goodsContainer} onPress={() => {
                            alert("商品详情链接")
                        }}>

                            <Image source={{uri:list_image}} style={styles.goodsicon} />

                            <Text numberOfLines={2} style={styles.goodstext}>{fullname}</Text>

                        </TouchableOpacity>
                        {/*已买商品相关信息*/}
                        <View style={styles.buyersContainer}>
                            {url.map((img, i) => (
                                <Image source={{uri:img}} style={styles.buyersicon}   />  
                            ))}
                            <View style={styles.numContainer}>
                                <Text style={styles.numtext}>{sum}已买</Text>
                            </View>
                            <View style={{ flex: 1 }} />
                            <TouchableOpacity >
                                <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.useicon} />
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View style={styles.actionContainer}>

                        <View style={{ flex: 1 }} />
                        <TouchableOpacity style={styles.buyContainer} onPress={() => {
                            alert("商品详情链接")
                        }}>
                            <Text style={styles.buytext}>
                                我也要买
                   </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
}
// <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.buyersicon} />
//                              <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.buyersicon} />
//                              <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.buyersicon} />
//                              <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.buyersicon} />
//                              <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.buyersicon} />
//                              <Image source={require('../../img/home/bg_customReview_image_default.png')} style={styles.buyersicon} />

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        width: screen.width,
        borderBottomWidth: StyleSheet.hairlineWidth, //分割线
        borderColor: 'white',
        backgroundColor: 'white',
    },
    gridContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',  //允许自动换行
        backgroundColor: 'white',
        marginTop: 10,
    },
    goodsContainer: {
        flexDirection: 'row',
        backgroundColor: '#fdf0c5',
        marginTop: 5,
        marginRight: 10,
        paddingBottom: 5,
        alignItems: "center",
    },
    borderContainer: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fdf0c5',
        marginRight: 29,
        borderRadius: 5,//设置圆角
        paddingLeft: 5,
        elevation: 3,
    },
    rightContainer: {
        flex: 1,
        marginLeft: 10,
    },
    buyContainer: {
        borderRadius: 4,//设置圆角
        alignItems: 'center',
        backgroundColor: '#f56c23',
        padding: 4,
    },
    numContainer: {
        borderRadius: 2,//设置圆角
        alignItems: 'center',
        borderColor: 'red',
        borderWidth: 1,
    },
    buyersContainer: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#fdf0c5',
        marginTop: 5,
        marginBottom: 5,
        alignItems: "center",
    },
    actionContainer: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'white',
        marginTop: 5,
        marginRight: 29,
        alignItems: 'center',
    },
    icon: {
        width: screen.width * 0.13,
        height: screen.width * 0.13,
        marginLeft: 10,
        borderRadius: 100,
    },
    bname: {
        color: 'black',
        fontSize: 17,
        fontWeight: 'bold',
    },
    createDate: {
        fontSize: 11,
    },
    text: {
        color: '#3c4350',
        marginTop: 8,
        marginRight: 10,
        fontSize: 13,
    },
    bicon: {
        width: screen.width * 0.23,
        height: screen.width * 0.23,
        marginRight: 5,
        marginBottom: 5,
    },
    goodsicon: {
        width: screen.width * 0.09,
        height: screen.width * 0.09,
        marginRight: 5,
        backgroundColor: '#fdf0c5',
    },
    buyersicon: {
        width: screen.width * 0.06,
        height: screen.width * 0.06,
        marginRight: 1,
        borderRadius: 100,
    },
    useicon: {
        width: screen.width * 0.05,
        height: screen.width * 0.05,
        marginRight: 5,
    },
    goodstext: {
        color: '#484e57',
        fontSize: 12,
        flexShrink: 1,
    },
    numtext: {
        color: 'red',
        fontSize: 10,
    },

    buytext: {
        color: 'white',
        fontSize: 10,
        fontWeight: 'bold',
    },

})

export default FindCell
